<script setup>
import {ref} from "vue";
import {BaseImgUrl, BaseURL} from "../../utils/lshttp";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
import LszbgCountDown from "../../components/LszbgCountDown.vue";
import {userJoinChallengeAPI} from "../../services/lstz";
import {onShow} from "@dcloudio/uni-app";
import {toChallenge} from "../../utils/utils";

const currentMenuIndex = ref(0) // 声明一个名为currentMenuIndex的ref，用于存储当前菜单索引
const commonInfoStore = useCommonInfoStore()

const gridChange = (e) => {
  currentMenuIndex.value = e.detail.current;
}
/* 下单奖励等级 */
const orderReward = ref([
  {
    tab_title: '首单奖励',
    content: '必定获得',
    price: 3
  },
  {
    tab_title: '第二单奖励',
    content: '必定获得',
    price: 10
  },
  {
    tab_title: '三单以后奖励',
    content: '随机不超过',
    price: 10
  },

])
const userJoinChallenge = ref([])
// 奖励阶梯值
const orderRewardData = ref()
// 邀请的人数差值
const inviteReward = ref()
const userInfoStore = useUserInfoStore()
const getUserJoinChallengeAPI = async () => {
  const city = commonInfoStore.addressDel.city
  const res = await userJoinChallengeAPI(1, 1, 10, userInfoStore?.userInfo?.id, city)

  // 获取大活动邀请好友下单金额
  orderReward.value = orderReward.value.slice(0, 2)
  let orderNum = orderReward.value.reduce((acc, item) => acc + item.price, 0)
  // 遍历大活动邀请奖励，并重新赋值
  res.result.forEach((item, index)=> {
    item.reward_steps = JSON.parse(item.reward_steps)
    if (item.type === 2){
      // 测试时手动设置邀请好友数量
      // item.nums = 8
      if (item.nums < item.reward_steps[0].condition){
        inviteReward.value = item.reward_steps[0].condition - item.nums;
        orderRewardData.value = Number(item.reward_steps[0].reward) + Number(orderNum) * Number(item.reward_steps[0].condition)
      } else if (item.nums >= item.reward_steps[0].condition ){
        // console.log('等级==',  item.reward_steps[index+1], item.reward_steps[index+1].condition)
        if (item.nums < item.reward_steps[index+1].condition){
          // console.log('人数小于第二阶梯')
          inviteReward.value = item.reward_steps[index+1].condition - item.nums;
          orderRewardData.value = Number(item.reward_steps[index+1].reward) + Number(orderNum) * Number(item.reward_steps[index+1].condition)
        }else if (item.nums >= item.reward_steps[index+1].condition){
          // console.log('人数大于等于第二阶梯')
          inviteReward.value = item.reward_steps[index+2].condition - item.nums;
          orderRewardData.value = Number(item.reward_steps[index+2].reward) + Number(orderNum) * Number(item.reward_steps[index+2].condition)
        }else if(item.reward_steps[index+1] === undefined){
          // console.log('最后一个阶梯')
          inviteReward.value = item.reward_steps[index].condition - item.nums;
          orderRewardData.value = Number(item.reward_steps[index].reward) + Number(orderNum) * Number(item.reward_steps[index].condition)
        }
      }
    }
  })
  // console.log('邀请等级总和==', res.result)
  userJoinChallenge.value = res.result
}
onShow(() => {
  if(userInfoStore?.userInfo?.id){
    getUserJoinChallengeAPI()
  }
})

</script>

<template>
  <view class="challenge" @click="toChallenge" v-if="userJoinChallenge.length>0">
    <view style="display: flex;flex-direction: column;margin: 20rpx 0 20rpx 20rpx;">
      <view class="tzrw" style="flex: 1">
        团长狂欢季
      </view>
      <view class="tzjl" style="flex: 1">
        邀请得奖励
      </view>
      <image class="gdtz" style="flex: 1" src="https://lsz.lszbg.com/imgs/gif/invite.gif"></image>
    </view>
    <swiper class="right" autoplay="true" interval="5000" @change="gridChange" style="width: 100%">
      <swiper-item v-for="(item, index) in userJoinChallenge" :key="index" style="width: 100%">
        <view>
          <view class="label_text">
            {{ currentMenuIndex + 1 }}/{{ userJoinChallenge.length }}
          </view>
          <view style="position: relative;" v-if="item.sub_type === 1">
            <view style="font-size: 30rpx;margin-left: 20rpx;margin-top: 10rpx;font-weight: bold">{{ item.title }}
            </view>
            <view style="font-size: 26rpx;margin-left: 20rpx;margin-top: 6rpx">
              <lszbg-count-down :is-hms="false" :time="item.time * 1000"></lszbg-count-down>
            </view>
            <view style="display: flex">
              <view style="display:flex;margin: 30rpx 0 20rpx">
                <view :class="item.nums>0?'slot-line1':'slot-line'">—</view>
                <view class="icon-content">
                  <view :class="item.nums>0?'slot-icon1':'slot-icon'"></view>
                  <view class="line_text">1天</view>
                </view>
                <view :class="item.nums>1?'slot-line1':'slot-line'">—</view>
                <view class="icon-content" v-if="item.date > 2">
                  <view :class="item.nums>1?'slot-icon1':'slot-icon'"></view>
                  <view class="line_text">2天</view>
                </view>
                <view :class="item.nums>2?'slot-line1':'slot-line'" v-if="item.date > 2">—</view>
                <view class="icon-content" v-if="item.date > 3">
                  <view :class="item.nums>2?'slot-icon1':'slot-icon'"></view>
                  <view class="line_text">3天</view>
                </view>
                <view :class="item.nums>3?'slot-line1':'slot-line'" v-if="item.date > 3">—</view>
                <view class="icon-content" v-if="item.date > 4">
                  <view :class="item.nums>3?'slot-icon1':'slot-icon'"></view>
                  <view class="line_text">4天</view>
                </view>
                <view :class="item.nums>4?'slot-line1':'slot-line'" v-if="item.date > 4">—</view>
                <view class="icon-content" v-if="item.date > 5">
                  <view :class="item.nums>4?'slot-icon1':'slot-icon'"></view>
                  <view class="line_text">5天</view>
                </view>
                <view :class="item.nums>5?'slot-line1':'slot-line'" v-if="item.date > 5">—</view>
                <view class="icon-content" v-if="item.date > 6">
                  <view :class="item.nums>5?'slot-icon1':'slot-icon'"></view>
                  <view class="line_text">6天</view>
                </view>
                <view :class="item.nums>6?'slot-line1':'slot-line'" v-if="item.date > 6">—</view>
                <view style="flex: 3"></view>
              </view>
              <view class="redbag_content">
                <view class="money_bg_content1">
                  <view style="position: relative">
                    <image class="money_bg"
                           :src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'"></image>
                    <view class="money_text">
                      <text>{{ item.money }}元</text>
                    </view>
                  </view>
                </view>
                <view style="height: 6rpx"></view>
                <!--              <image class="redbag" :src="item.red_bag||'https://lsz.lszbg.com/imgs/gif/redbag.gif'"></image>-->
                <view :class="item.nums>6?'color7day1':'color7day'">{{ item.date }}天
                </view>
              </view>
            </view>
          </view>
          <view style="position: relative;" v-if="item.type === 2 || item.sub_type === 2">
            <!--<view style="font-size: 30rpx;margin-left: 20rpx;margin-top: 10rpx;font-weight: bold">{{ item.title }}
            </view>-->
            <view style="font-size: 30rpx;margin-left: 20rpx;margin-top: 10rpx;font-weight: bold">
              <text>已获得奖励：</text>
              <text style="color: #fc4106;">{{item.sumRewardAmount}}元</text>
            </view>
            <view style="margin-left: 20rpx;margin-top: 6rpx">
              <lszbg-count-down :is-hms="false" :time="item.time * 1000"></lszbg-count-down>
            </view>
            <view style="font-size: 24rpx;color: #666666;margin: 2px 10px 0;">已邀请：{{ item.nums }} 人</view>
            <view v-if="item.nums < item.reward_steps[item.reward_steps.length-1].condition">
              <!--<view style="display: flex;align-items: center;margin: 10rpx 20rpx 0;font-size: 24rpx;color: #666666;">
                <text>您已邀请</text>
                <text v-if="item.user_ids.length >= 2 && item.user_ids.length < 5" style="color: #fc4106;padding: 0 10rpx;">2</text>
                <text v-if="item.user_ids.length >= 5 && item.user_ids.length < 7" style="color: #fc4106;padding: 0 10rpx;">5</text>
                <text v-if="item.user_ids.length >= 7" style="color: #fc4106;padding: 0 10rpx;">7</text>
                <text>名好友并下单获得</text>
                <text v-if="item.user_ids.length >= 2 && item.user_ids.length < 5" style="color: #fc4106;padding-left:10rpx;">15元</text>
                <text v-if="item.user_ids.length >= 5 && item.user_ids.length < 7" style="color: #fc4106;padding-left:10rpx;">50元</text>
                <text v-if="item.user_ids.length >= 7" style="color: #fc4106;padding-left:10rpx;">88元</text>
              </view>-->

              <view style="margin: 10rpx 20rpx 0;font-size: 24rpx;color: #666666;">
                <text v-if="item.nums === 0">邀请</text>
                <text v-if="item.nums > 0">再邀请</text>
                <text style="color: #fc4106;padding: 0 10rpx;">{{ inviteReward }}</text>
                <!--<text v-if="item.nums === 0" style="color: #fc4106;padding: 0 10rpx;">2</text>
                <text v-if="item.nums === 1" style="color: #fc4106;padding: 0 10rpx;">1</text>
                <text v-if="item.nums === 2" style="color: #fc4106;padding: 0 10rpx;">3</text>
                <text v-if="item.nums === 3" style="color: #fc4106;padding: 0 10rpx;">2</text>
                <text v-if="item.nums === 4" style="color: #fc4106;padding: 0 10rpx;">1</text>
                <text v-if="item.nums === 5" style="color: #fc4106;padding: 0 10rpx;">2</text>
                <text v-if="item.nums === 6" style="color: #fc4106;padding: 0 10rpx;">1</text>-->
                <text>名好友下单至多可获得</text>
                <text style="color: #fc4106;padding-left:10rpx;">{{orderRewardData}}元</text>
              </view>
            </view>
            <view v-if="item.nums >= item.reward_steps[item.reward_steps.length-1].condition">
              <view style="align-items: center;margin: 4rpx 20rpx 0;font-size: 24rpx;color: #666666;">
                恭喜你已邀请<text style="color: #fc4106;">{{ item.reward_steps[item.reward_steps.length-1].condition }}</text>名好友下单，获得<text style="color: #fc4106;">{{orderRewardData}}元</text>奖励。你可以再次参与活动，继续邀请好友挣钱哦!
              </view>
            </view>
            <!--<view v-if="item.user_ids.length === 0">
              <view style="display: flex;align-items: center;margin: 10rpx 20rpx 0;font-size: 24rpx;color: #666666;">
                <text>邀请</text>
                <text style="color: #fc4106;padding: 0 10rpx;">2</text>
                <text>名好友下单至多可获得</text>
                <text style="color: #fc4106;padding-left:10rpx;">61元</text>
              </view>
            </view>-->

            <!--<view style="display:flex;align-items: center;margin-top: 30rpx">
              <view class="bl_box">
                <view class="" style="width: 118rpx;border-radius: 20rpx;overflow: hidden">
                  <progress :percent="(item.nums/(item.type === 1 ? item.order_num : item.invite_num)*100)"
                            border-radius="100"
                            duration="16"
                            stroke-width="8"
                            activeColor="#FF8548"
                            backgroundColor="#FFDECE"
                            active="true"/>
                </view>
                <text class="val_num">完成进度{{ item.nums }}/{{
                    item.type === 1 ? item.order_num : item.invite_num
                  }}
                </text>
              </view>
            </view>-->
            <!--<view class="money_bg_content">
              <view style="position: relative">
                <image class="money_bg"
                       :src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'"></image>
                <view class="money_text">
                  <text>{{ item.money }}元</text>
                </view>
              </view>
            </view>-->
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style scoped lang="scss">
.challenge {
  height: 200rpx;
  border-radius: 20rpx;
  margin: 0 26rpx 20rpx;
  display: flex;
  overflow: hidden;
  background: linear-gradient( 272deg, #FEDE67 0%, #FE5953 100%);
}

.tzrw {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.tzjl {
  color: white;
  font-size: 26rpx;
  font-weight: bold;
}

.gdtz {
  width: 138rpx;
  height: 60rpx;
  margin-top: -10rpx;
}

.right {
  margin: 10rpx 10rpx 10rpx 30rpx;
  background-color: #fdf4e5;
  height: 180rpx;
  flex: 1;
  border-radius: 20rpx;;
  position: relative
}

.label_text {
  background-color: #fd681f;
  width: 76rpx;
  text-align: center;
  border-radius: 0 20rpx 0 20rpx;
  font-size: 28rpx;
  padding: 2rpx;
  position: absolute;
  top: 0;
  right: 0;
  color: white
}

.icon-content {
  width: 36rpx;
}

.slot-icon {
  margin: auto;
  width: 18rpx;
  height: 18rpx;
  background-color: #FFDAB5;
  border-radius: 100px;
  font-size: 22rpx;
  color: #fff;
  line-height: 18rpx;
  text-align: center;
  //border: 1rpx solid #FFFFFF;
}

.slot-line {
  color: #FFDAB5;
  font-size: 22rpx;
  font-weight: bold;
  line-height: 18rpx;
  flex: 1;
}

.slot-icon1 {
  margin: auto;
  width: 18rpx;
  height: 18rpx;
  background-color: #ff8000;
  border-radius: 100px;
  font-size: 22rpx;
  color: #fff;
  line-height: 18rpx;
  text-align: center;
  //border: 1rpx solid #000000;
}

.slot-line1 {
  color: #ff8000;
  font-size: 22rpx;
  font-weight: bold;
  line-height: 18rpx;
  flex: 1;
}

.line_text {
  margin-top: 6rpx;
  color: #888888;
  font-size: 20rpx;
  text-align: center;
}

.redbag_content {
  bottom: 0;
  right: 13rpx;
  color: white
}

.redbag {
  width: 58rpx;
  height: 68rpx;
}

.bl_box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 26rpx;

  .val_num {
    font-size: 28rpx;
    font-weight: bold;
    color: #FF8548;
    margin-left: 16rpx;
    margin-top: -2px;
  }

  .time_text {
    color: #FC7532;
    font-size: 22rpx;
  }
}

.color7day {
  color: #AAAAAA;
  margin-top: -3rpx;
  font-size: 20rpx;
  font-weight: bold;
  text-align: center
}

.color7day1 {
  color: #fd681f;
  font-size: 20rpx;
  font-weight: bold;
  text-align: center
}

.money_bg_content1 {
  display: flex;
  width: 48rpx;
  height: 58rpx;
}

.money_bg_content {
  margin-top: 20rpx;
  display: flex;
  width: 48rpx;
  height: 58rpx;
  position: absolute;
  right: 38rpx;
  bottom: 0;
}
.money_bg {
  width: 48rpx;
  height: 58rpx;
  position: absolute;
  z-index: 1;
}

.money_text {
  color: #ff5c14;
  font-size: 16rpx;
  line-height: 43rpx;
  z-index: 100;
  width: 48rpx;
  position: relative;
  text-align: center;
  font-weight: bold;
}
</style>